<template>
	<div>
		<el-dialog
			:model-value="dialogTableVisibleOr"
			:title="title"
			:width="formLabelWidth"
			:show-close="false"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
		>
			<div class="dialogName" v-if="table == '1' || table == '4'">
				<span>应用名称</span>
				<el-input class="input" placeholder="请输入应用名称" v-model="threeListName" style="width: 240px" />
				<el-button type="primary" @click="searchList('search')">查询</el-button>
				<el-button @click="searchList('handel')">重置</el-button>
			</div>
			<!--请选择方案中的开发项目-->
			<div v-if="table == '1'">
				<el-table
					ref="myTable"
					class="mt-5 table_wrapper"
					:cell-style="{ textAlign: 'center' }"
					:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
					:data="tableData"
					v-loading="state.loading"
					:header-cell-class-name="cellClass"
					style="width: 100%"
					border
					@select="selectRow"
				>
					<el-table-column type="selection" width="80" :selectable="isSelected" />
					<el-table-column type="index" label="序号" width="80" />
					<el-table-column property="threeListName" label="数字化应用名称" />
					<el-table-column property="threeListCode" label="数字化应用编码" />
					<el-table-column property="declarationTime" label="填报时间" />

					<slot name="operation"> </slot>
				</el-table>
			</div>
			<!--请选择关联应用-->
			<div v-if="table == '4'">
				<el-table
					ref="myTable"
					class="mt-5 table_wrapper"
					:cell-style="{ textAlign: 'center' }"
					:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
					:data="tableDataAppList"
					:header-cell-class-name="cellClass"
					style="width: 100%"
					border
					@select="selectRow"
				>
					<el-table-column type="selection" width="80" />
					<el-table-column type="index" label="序号" width="80" />
					<el-table-column property="appName" label="数字化应用名称" />
					<el-table-column property="appCode" label="数字化应用编码" />
					<el-table-column property="appManagerName" label="应用管理员" />
					<el-table-column property="appManagerPhone" label="管理员联系方式" />
					<el-table-column property="buildOrgName" label="开发部门" />
					<slot name="operation"> </slot>
				</el-table>
			</div>
			<!--新增拟使用数据-->
			<div v-if="table == '5'">
				<el-table
					ref="myTable"
					class="mt-5 table_wrapper"
					:cell-style="{ textAlign: 'center' }"
					:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
					:data="tableDataNewAdd"
					:header-cell-class-name="cellClass"
					style="width: 100%"
					border
					@select="selectRow"
				>
					<el-table-column type="selection" width="80" :selectable="isSelected" />
					<el-table-column type="index" label="序号" width="80" />
					<el-table-column property="threeListName" label="数字资源名称" />
					<el-table-column property="threeListCode" label="数字资源编号" />
					<slot name="operation"> </slot>
				</el-table>
			</div>
			<!--历史数据-->
			<div v-if="table == '2'">
				<el-table
					class="mt-5"
					:cell-style="{ textAlign: 'center' }"
					:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
					:data="tableDataHistory"
					style="width: 100%"
					border
				>
					<el-table-column type="index" label="序号" width="80" />
					<el-table-column property="date" label="创建时间" />

					<el-table-column fixed="right" label="操作" width="180">
						<template #default="scoped">
							<el-button text type="primary" icon="View" @click="showDetails(scoped.row)">查看</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!--修改申请输入框-->
			<div v-if="table == '3'">
				<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
					<el-form-item label="修改内容：" prop="upDateText">
						<el-input type="textarea" v-model="ruleForm.upDateText" placeholder="请输入修改内容" clearable :maxlength="350" show-word-limit />
					</el-form-item>
				</el-form>
				<!-- <span></span>
				<el-input v-model="upDateText" type="textarea" placeholder="请输入修改内容" /> -->
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="closeDialog(0), resetForm(ruleFormRef)">取消</el-button>
					<!--开发方案相关-->
					<el-button v-if="table == '1'" type="primary" @click="closeDialog(1)">确认添加</el-button>
					<!--请选择关联应用-->
					<el-button v-if="table == '4'" type="primary" @click="closeDialog(2)">确定</el-button>
					<!--修改申请相关-->
					<el-button v-if="table == '3'" type="primary" @click="submitForm(ruleFormRef)">提交申请</el-button>
				</div>
			</template>
			<!--分页-->
			<div v-if="table == '2' || table == '4' || table == '1'" style="text-align: right; width: 100%; margin-top: 20px">
				<el-pagination
					v-model:current-page="state.pageInfo.current"
					:page-size="state.pageInfo.size"
					layout="total, sizes,prev, pager, next,jumper"
					:total="state.total"
					@current-change="currentChange"
					@size-change="sizeChange"
				/>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { appListApi } from '/@/api/threeList/declare';
import { getThreeList, dataModifySubmitApplication } from '/@/api/digitalList/digitalLization';
import { reactive, ref, inject } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import { result, set } from 'lodash';
const props = defineProps({
	dialogTableVisible: {
		type: Boolean,
		default: () => {
			return false;
		},
	},
	formLabelWidth: {
		type: Number,
		default: () => {
			return 1000;
		},
	},
	dialogTitle: {
		type: String,
		default: () => {
			return '';
		},
	},
	updateData: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
interface RuleForm {
	upDateText: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref<RuleForm>({
	upDateText: '',
});
const rules = reactive<FormRules<RuleForm>>({
	upDateText: [
		{ required: true, message: '请输入修改意见', trigger: 'blur' },
		// { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
	],
});
const dialogTableVisibleOr = computed(() => {
	return props.dialogTableVisible;
});
const table = ref('');
watch(
	() => props.updateData,
	(val) => {
		if (val) {
			declareId.value = val.declareId;
		}
	}
);
const title = computed(() => {
	return props.dialogTitle;
});
watch(
	() => props.dialogTableVisible,
	(val) => {
		if (val) {
			switch (title.value) {
				case '请选择方案中的开发项目':
					paramsData.value.type = 1;
					getThreeListPage(); //获取type1列表
					table.value = '1';
					break;
				case '请选择方案中的运维项目':
					paramsData.value.type = 2;
					getThreeListPage(); //获取type2列表
					table.value = '1';
					break;
				case '请选择关联应用':
					getAppListApi(); //获取关联应用列表
					table.value = '4'; //
					break;
				case '历史数据':
					table.value = '2'; //历史数据
					break;
				case '新增拟使用数据':
					table.value = '5'; //新增拟使用数据
					break;
				default:
					table.value = '3';
					break;
			}
		}
	}
);
const declareId = ref();
const myTable = ref();
const state = ref<any>({
	pageInfo: {
		current: 1,
		size: 10,
	},
	total: 0,
	loading: false,
	tableData: [],
});
const tableData = ref([]);
//新增拟使用数据
const tableDataNewAdd = ref([]);
const tableDataAppList = ref([]);
const tableDataHistory = ref([
	{
		date: '2015-05-04',
	},
	{
		date: '2018-08-08',
	},
]);
const input1 = ref('');
const { dialogTableVisible, dialogTitle } = toRefs(props);
const showDetails = (data?: any) => {
	console.log(data);
};
const emit = defineEmits(['closeDialog']);
const isSelected = (row?: any, index?: any) => {
	// return row.isWorkTeam == '1' ? false : true;
	return true;
};
const indexData = ref({
	// threeListCode: '',
});
const indexDataChange = ref(false);
const selectRow = (row?: any, index?: any) => {
	//防止未选择项目跳转
	if (row.length && index) {
		indexDataChange.value = true;
	} else {
		indexDataChange.value = false;
	}
	//控制单选
	if (row.length > 1) {
		let del_row = row.shift();
		myTable.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
	}
	indexData.value = { ...index, type: paramsData.value.type };
};
//隐藏表头
const cellClass = (row: any) => {
	// 隐藏表头多选框
	if (row.columnIndex === 0) {
		return 'disabledCheck';
	}
};
const isUpdateText = ref({
	is: true,
});
const closeDialog = (sum?: number) => {
	switch (sum) {
		case 1:
			if (indexDataChange.value == false) {
				ElMessage({
					type: 'warning',
					message: '请选择开发方案',
				});
			} else {
				emit('closeDialog', indexData.value);
			}
			break;
		case 2:
			if (indexDataChange.value == false) {
				ElMessage({
					type: 'warning',
					message: '请选择关联应用',
				});
			} else {
				emit('closeDialog', indexData.value);
			}
			break;
		case 3:
			emit('closeDialog', isUpdateText.value);
			break;
		default:
			emit('closeDialog');
			break;
	}
};
const submitUpdateData = ref({});
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			submitUpdateData.value = {
				businessKey: declareId.value,
				businessType: '2',
				applyReason: ruleForm.value.upDateText,
			};
			dataModifySubmitApplication(submitUpdateData.value).then((res) => {
				ElMessage({
					type: res.code == 0 ? 'success' : 'warning',
					message: res.msg,
				});
				closeDialog(3);
				formEl.resetFields();
			});
		} else {
			console.log('error submit!', fields);
		}
	});
};
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};
const threeListName = ref('');
const paramsData = ref({
	current: 1,
	size: 10,
	key: '',
	type: 1,
});
const getThreeListPage = () => {
	state.value.loading = true;
	getThreeList(paramsData.value).then((res) => {
		state.value.total = res.data.total;
		tableData.value = res.data.records;
		state.value.loading = false;
	});
};
const paramsAppList = ref({
	current: 1,
	size: 10,
	appName: '',
});
const getAppListApi = () => {
	state.value.loading = true;
	appListApi(paramsAppList.value).then((res) => {
		tableDataAppList.value = res.records;
		state.value.total = res.total;
		state.value.loading = false;
	});
};
const searchList = (str?: string) => {
	//是请选择方案中的开发项目的情况
	if (table.value == '1') {
		switch (str) {
			case 'search': //查询
				paramsData.value.key = threeListName.value;
				getThreeListPage();
				break;

			default: //重置
				threeListName.value = '';
				paramsData.value.key = '';
				getThreeListPage();
				break;
		}
	} else {
		switch (str) {
			case 'search': //查询
				paramsAppList.value.appName = threeListName.value;
				getAppListApi();
				break;

			default: //重置
				threeListName.value = '';
				paramsAppList.value.appName = '';
				getAppListApi();
				break;
		}
	}
};
//页码改变
const currentChange = (current: number) => {
	paramsData.value.current = current;
	paramsAppList.value.current = current;
	state.value.pageInfo.current = current;
};
// 每页数量
const sizeChange = (size: number) => {
	paramsData.value.size = size;
	paramsAppList.value.size = size;
	state.value.pageInfo.size = size;
};
const getWhichList = () => {
	// if(table.value){}
};
onMounted(() => {
	getWhichList();
});
</script>

<style scoped lang="scss">
.dialogName {
	width: 100%;
	display: flex;
	justify-content: right;
	align-items: center;
	span {
		margin-right: 1%;
	}
	.input {
		margin-right: 2%;
	}
}
:deep(.table_wrapper .disabledCheck .cell) {
	visibility: hidden;
}
</style>